<?php
    $sql = "SELECT img_path,id,position FROM contact_slide ORDER BY position";
    $result = $db->Execute($sql);
    $i = 1;
    $j = 0;
    $contact_slide = '';
    $SITEURL = $iniVars['Locations']['siteurl'];
    while (!$result->EOF)
    {
        $contact_slide .= <<<sdl
            <li id="slideOrder_{$i}">
                <div class="contactSlideList">
                    <img src="images/ajax-loader.gif" class="ajax_load_img delete_indicator"/>
                    <img src="{$SITEURL}{$result->fields['img_path']}" class="contactSlideThumb" />
                    <p>
                        <a href="javascript:void(0);" id="{$result->fields['id']}" class="aLink deleteImg">Delete</a>
                    </p>
                </div>
                <span class="hiddenEle" id="imgOderNew"><p>{$result->fields['id']}</p></span>
            </li>
sdl;
        ++$i;
        $j++;
        $lastPos = $result->fields['position'];
        $result->MoveNext();
    }
    $result->Close();
    $contactSlideImgInput = '';
    for($i;$i<7;$i++)
    {
        $contactSlideImgInput .= '<p style="margin-bottom:10px;"><input name="contactSlideImgVar[]" type="file" class="input medium" id="contactSlideImgVar" /></p>';
    }
    
    $sql = "SELECT td_value FROM text_data WHERE td_id=4";
    $resultMsg1 = $db->Execute($sql);
    $resultMsg1->Close();
    
    $sql = "SELECT td_value FROM text_data WHERE td_id=5";
    $resultMsg2 = $db->Execute($sql);
    $resultMsg2->Close();
    
    $sql = "SELECT td_value FROM text_data WHERE td_id=7";
    $resultMsg3 = $db->Execute($sql);
    $resultMsg3->Close();
    
    $sql = "SELECT td_value FROM text_data WHERE td_id=8";
    $resultMsg4 = $db->Execute($sql);
    $resultMsg4->Close();
    
    $sql = "SELECT cmap_id,cmap_title FROM contact_map";
    $resultMap = $db->Execute($sql);
    
    $contact_map = '';
    while (!$resultMap->EOF)
    {
        $contact_map .= <<<sdl
            <tr>
                <td>
                    {$resultMap->fields['cmap_title']}
                </td>
                <td>
                    <a href="pages/cmap_mange.php?cmapid={$resultMap->fields['cmap_id']}" title="Edit {$resultMap->fields['cmap_title']}" class="aColorBox"><img src="images/edit.png" class="img_link"/></a>
                    <a href="javascript:void(0)" onclick="delete_map('{$resultMap->fields['cmap_title']}','{$resultMap->fields['cmap_id']}');" title="Delete {$resultMap->fields['cmap_title']}?"><img src="images/delete.png" class="img_link delete_map"/></a>
                </td>
            </tr>
sdl;
        $resultMap->MoveNext();
    }
    $resultMap->Close();
?>

<script type="text/javascript" src="js/jquery.dragsort-0.3.10.min.js"></script>
<!-- elRTE -->
<script src="editor/elrte-1.1/js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="editor/elrte-1.1/css/elrte.full.css" type="text/css" media="screen" charset="utf-8" />
<!-- elfinder -->
<script src="editor/elfinder-1.1/js/elfinder.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="editor/elfinder-1.1/css/elfinder.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.colorbox-min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/colorbox.css" type="text/css" media="screen" charset="utf-8" />
    
<script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
    });
    
    $(document).ready(function(){
        $('.aColorBox').colorbox({width:'600',height:'95%'});
        
        var inputEle = <?php echo $j; ?>;
        if(inputEle<7)
        {
            $('.submitImgBt').css('display','block');
        }
        
        $('#editor1').elrte( {
            cssClass : 'el-rte',
            height   : 160,
            toolbar  : 'complete',
            cssfiles : ['editor/elrte-1.1/css/elrte-inner.css'],
            fmOpen : function(callback) {
                $('<div id="myelfinder" />').elfinder({
                    url : 'editor/elfinder-1.1/connectors/php/connector.php',
                    dialog : { width : 900, modal : true, title : 'Files' }, // open in dialog window
                    closeOnEditorCallback : true, // close after file select
                    editorCallback : callback     // pass callback to file manager
                });
            }
        });
        
        $('#editor2').elrte( {
            cssClass : 'el-rte',
            height   : 160,
            toolbar  : 'complete',
            cssfiles : ['editor/elrte-1.1/css/elrte-inner.css'],
            fmOpen : function(callback) {
                $('<div id="myelfinder" />').elfinder({
                    url : 'editor/elfinder-1.1/connectors/php/connector.php',
                    dialog : { width : 900, modal : true, title : 'Files' }, // open in dialog window
                    closeOnEditorCallback : true, // close after file select
                    editorCallback : callback     // pass callback to file manager
                });
            }
        });
        
        $('#editor3').elrte( {
            cssClass : 'el-rte',
            height   : 180,
            toolbar  : 'complete',
            cssfiles : ['editor/elrte-1.1/css/elrte-inner.css'],
            fmOpen : function(callback) {
                $('<div id="myelfinder" />').elfinder({
                    url : 'editor/elfinder-1.1/connectors/php/connector.php',
                    dialog : { width : 900, modal : true, title : 'Files' }, // open in dialog window
                    closeOnEditorCallback : true, // close after file select
                    editorCallback : callback     // pass callback to file manager
                });
            }
        });
        
        $('#editor4').elrte( {
            cssClass : 'el-rte',
            height   : 160,
            toolbar  : 'complete',
            cssfiles : ['editor/elrte-1.1/css/elrte-inner.css'],
            fmOpen : function(callback) {
                $('<div id="myelfinder" />').elfinder({
                    url : 'editor/elfinder-1.1/connectors/php/connector.php',
                    dialog : { width : 900, modal : true, title : 'Files' }, // open in dialog window
                    closeOnEditorCallback : true, // close after file select
                    editorCallback : callback     // pass callback to file manager
                });
            }
        });
        
        $('.submitMsgBt').click(function(){
            $("#msg_success_msg").css('display','none');
            $("#msg_error_msg").css('display','none');
            $('.msg_submit_indicator').css('display','inline');
            $('#contactMsgFrm').attr('method','post');
            $('#contactMsgFrm').attr('target','ajaxIfrm');
            $('#contactMsgFrm').submit();
        });
        
        $('.submitImgBt').click(function(){
            $("#img_success_msg").css('display','none');
            $("#img_error_msg").css('display','none');
            $('.img_submit_indicator').css('display','inline');
            $('#contactImgFrm').attr('method','post');
            $('#contactImgFrm').attr('target','ajaxIfrm');
            $('#contactImgFrm').submit();
        });
        
         $("#contactSlideList").dragsort({ dragSelector: "div", dragEnd: saveOrder, dragBetween: true, placeHolderTemplate: "<li class='contactSlidePlaceHolder'><div></div></li>" });
        
        $(".deleteImg").click(function(){
            if(confirm('Delete image?'))
            {
                var thisLi = $(this);
                thisLi.parents(".contactSlideList").find('.delete_indicator').css('display','inline');
                var data = 'action=deleteImg&contactSlideImgId=' + $(this).attr('id');
                $.post('function/contact.php',data,function(data){
                    $('.delete_indicator').css('display','none');
                    if(trim(data)=='success')
                    {
                        thisLi.parents("li").remove();
                        $('.contactSlideInput').append('<p style="margin-bottom:10px;"><input name="contactSlideImgVar[]" type="file" class="input medium" id="contactSlideImgVar" /></p>');
                        $('.submitImgBt').css('display','block');
                        $("#img_success_msg").html('ลบรูปเรียบร้อยแล้ว');
                        $("#img_success_msg").show('highlight',3000,function(){
                            $("#img_success_msg").hide('highlight',3000);
                        });
                    }
                    else
                    {
                        $("#img_error_msg").html('ไม่สามารถลบรูปได้ กรุณาลองใหม่อีกครั้ง');
                        $("#img_error_msg").html(data);
                        $("#img_error_msg").show('highlight',3000,function(){
                            $("#img_error_msg").hide('highlight',3000);
                        });
                    }
                });
            }
        });
        
    });
    
    function saveOrder() {
        var serialStr = "";
        $("#contactSlideList li span").each(function(i, elm) {
            serialStr += (i > 0 ? "|" : "") + $(elm).children("p").html();
        });
        
        $('.delete_indicator').css('display','inline');
        var order = 'action=orderImg&contactSlideImgOrder='+serialStr;
        
        $.post('function/contact.php',order,function(data){
            $('.delete_indicator').css('display','none');
            if(trim(data)=='success')
            {
                $("#img_success_msg").html('เปลี่ยนตำแหน่งรูปภาพเรียบร้อยแล้ว');
                $("#img_success_msg").show('highlight',3000,function(){
                    $("#img_success_msg").hide('highlight',3000);
                });
            }
            else
            {
                $("#img_error_msg").html('ไม่สามารถเปลี่ยนตำแหน่งรูปภาพใหม่ได้ กรุณาลองใหม่อีกครั้ง');
                $("#img_error_msg").html(data);
                $("#img_error_msg").show('highlight',3000,function(){
                    $("#img_error_msg").hide('highlight',3000);
                });
            }
        });
    };
    
    function delete_map(cTitle,cId){
        if(confirm('ต้องการลบแผนที่ '+cTitle)){
            $.post('function/cMapDelete.php','cMapId='+cId,function(data){
                if(trim(data)=='success')
                {
                    alert('ข้อมูลถูกลบแล้ว');
                    window.location='index.php?page=contact';
                }
                else
                {
                    alert(data);
                }
            });
        }
    }
    
</script>

<h3 class="pageTitle">จัดการหน้า Contact Us</h3>

<div id="tabs" class="footerEdit">
    
    <ul>
        <li id="car_"><a href="#tabs-1" title="Add files">Message</a></li>
        <li id="car_"><a href="#tabs-2" title="Add files">Images</a></li>
        <li id="car_"><a href="#tabs-3" title="Add files">Map</a></li>
    </ul>
    <div id="tabs-1" class="contactMsgFrm">
        <form name="contactMsgFrm" id="contactMsgFrm" action="function/contact.php">
            <p class="boxTitle">message 1</p>
            <div id="editor1">
                <?php echo $resultMsg1->fields['td_value']; ?>
            </div>
            <br />
            <p class="boxTitle">message 2</p>
            <div id="editor2">
                <?php echo $resultMsg2->fields['td_value']; ?>
            </div>
            <br />
            <p class="boxTitle">message 3</p>
            <div id="editor3">
                <?php echo $resultMsg3->fields['td_value']; ?>
            </div>
            <br />
            <p class="boxTitle">message 4</p>
            <div id="editor4">
                <?php echo $resultMsg4->fields['td_value']; ?>
            </div>
            <input type="hidden" name="action" value="msg" />
            <input type="button" class="button submitMsgBt" value="Save" />
            &nbsp;<img src="images/ajax-loader.gif" class="ajax_load_img msg_submit_indicator"/>
        </form>
        <div class="information canhide png_bg ajax_msg"></div>
        <div class="fail canhide png_bg ajax_msg" id="msg_error_msg"></div>
        <div class="success canhide ajax_msg" id="msg_success_msg"><p></p></div>
    </div>
    <div id="tabs-2" class="contactImgFrm">
        <form name="contactImgFrm" id="contactImgFrm" action='function/contact.php' enctype='multipart/form-data'>
            <ul class="contactSlideOrderlist" id="contactSlideList">
                <?php echo $contact_slide; ?>
            </ul>
            <div class="clear"></div>
            <div class="contactSlideInput">
                <?php echo $contactSlideImgInput; ?>
            </div>
            <input type="hidden" name="action" value="uploadImg" />
            <input type="button" class="button submitImgBt hiddenEle" value="Submit" />
            &nbsp;<img src="images/ajax-loader.gif" class="ajax_load_img img_submit_indicator"/>
        </form>
        <div class="information canhide png_bg">ลากรูปภาพ เพื่อจัดตำแหน่ง<br />จำนวนรูปภาพ 6 รูป และขนาดรูปภาพ 250x170 pixel</div>
        <div class="fail canhide png_bg ajax_msg" id="img_error_msg"></div>
        <div class="success canhide ajax_msg" id="img_success_msg"><p></p></div>
        <iframe name="ajaxIfrm" class="ajaxIfrm" ></iframe>
    </div>
    
    <div id="tabs-3" class="contactImgFrm">
        <table id="cmap_list">
            <tr>
                <th id="cmap_br">สาขา</td>
                <td></td>
            </tr>
            <?php echo $contact_map; ?>
        </table>
        <a href="pages/cmap_mange.php" class="aColorBox"><img src="images/add.jpg" /></a>
    </div>
    
    <iframe name="ajaxIfrm" class="ajaxIfrm" ></iframe>
</div>